@import "~mixin";

.Carousel{
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.item{
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -960px;
  width: 1920px;
  height: 400px;
  visibility: hidden;
  opacity: 0;
  transition: 1s;

  &.active{
    visibility: visible;
    opacity: 1;
  }
  img{width: 100%}
}

.pager{
  position: absolute;
  bottom: 15px;
  left: 0;
  width: 100%;
  text-align: center;

  span{
    display: inline-block;
    margin: 0 5px;
    height: 6px;
    width: 38px;
    text-indent: -100px;
    overflow: hidden;
    @include opacity-bg(rgba(0,0,0,0.2));
    cursor: pointer;

    &.active{
      @include opacity-bg(rgba(255,255,255,0.3));
    }
  }
}